<template>
  <div>
    <el-form ref="myform" :model="formItem" label-width="120px" size="mini" class="form-view">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="first">
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="合同名称：">
                {{ formItem.name }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同号：">
                {{ formItem.code }}
              </el-form-item>
            </el-col>
            <el-col ::span="12">
              <el-form-item label="合同类型">
                {{ CONTRACT_TYPE[formItem.type] }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="交货期限(天)：">
                {{ formItem.deliveryDeadline }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="签订时间：">
                {{ formItem.signingDate }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供货方名称：">
                {{ formItem.manufacturerName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同金额(元)：">
                {{ formItem.amount }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发票：">
                {{ formItem.bill }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="付款状况：">
                {{ formItem.paymentStatus === true ? '已付款' :'未付款' }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="附件">
                <div v-for="fileObj in formItem.attachment" :key="fileObj.fsId">
                  <el-link type="primary" :href="downloadFileUrl(fileObj.fsId)" :download="downloadFileUrl(fileObj.fsId)" target="_blank">{{ fileObj.name }}</el-link>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider content-position="left">合同项信息</el-divider>
          <el-row>
            <PageableTable
              :loading="false"
              :table-height="300"
              :data="formItem.items"
              :disable-pageable="true"
              class="fixed-table-table"
            >
              <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :width="column.width" :sortable="column.sortable">
                <template slot-scope="scope">
                  <column-render :render="column.render" :row="scope.row" :column="column" />
                </template>
              </el-table-column>
            </PageableTable>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="其他信息" name="second">
          <el-row :gutter="40">
            <!-- <el-col :span="12">
              <el-form-item label="供货方地址：">
                {{ formItem.manufacturerAddress }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供货方联系人：">
                {{ formItem.manufacturerContact }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供货方联系方式：">
                {{ formItem.manufacturerTelephone }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供货方开户行：">
                {{ formItem.manufacturerBank }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供货方账号：">
                {{ formItem.manufacturerAccount }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供货方税号：">
                {{ formItem.manufacturerTaxId }}
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="包装方式：">
                {{ formItem.packing }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="运输方式：">
                {{ formItem.transport }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="质量保障：">
                {{ formItem.qualityAssurance }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="到货地点：">
                {{ formItem.arrivalAddress }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="付款条件：">
                {{ formItem.paymentTerms }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注：">
                {{ formItem.remark }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮编：">
                {{ formItem.postCode }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script>
import PageableTable from '@neu/biz-core/components/PageableTable'
import { formatDate } from '@neu/biz-core/utils/utils'
import { detail, downloadFileUrl } from '@neu/dcam-ui/api/contract'
import { CONTRACT_TYPE } from '@neu/dcam-ui/utils/constants'

// 定义一个表单原始项
const formItem = {
  name: '',
  code: '',
  manufacturerId: '',
  manufacturerName: '',
  manufacturerAddress: '',
  manufacturerContact: '',
  manufacturerTelephone: '',
  manufacturerBank: '',
  manufacturerAccount: '',
  manufacturerTaxId: '',
  postCode: '',
  deliveryDeadline: 90,
  signingDate: null,
  packing: '',
  transport: '',
  qualityAssurance: '',
  arrivalAddress: '',
  paymentTerms: '',
  remark: '',
  paymentStatus: false,
  bill: '',
  items: [],
  /** 附件 */
  attachment: [],
  amount: 0
}
export default {
  name: 'ContractEditForm',
  components: {
    PageableTable
  },
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      // 编辑的表单内容
      formItem: {
        ...formItem
      },
      insideColumns: [
        { title: '分类名称', key: 'assetTypeName' },
        // { title: '产品名称', key: 'productName' },
        { title: '规格型号', key: 'standard' },
        { title: '金额', key: 'amount' },
        { title: '设备数量', key: 'count' },
        { title: '入库数量', key: 'acceptedCount' },
        { title: '描述', key: 'description' }
      ],
      downloadFileUrl: downloadFileUrl,
      activeName: 'first',
      CONTRACT_TYPE
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: function() {
      this.fetch()
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    // 初始化表单数据
    fetch() {
      if (this.id !== -1) {
        detail(this.id).then(response => {
          const data = response.data
          if (data.attachment) {
            const fileJoins = data.attachment.split('||')
            data.attachment = fileJoins.map(it => {
              const fsInfo = it.split('@@')
              return {
                fsId: fsInfo[0],
                name: fsInfo[1]
              }
            })
          } else {
            data.attachment = []
          }
          this.formItem = {
            ...data
          }
          if (this.formItem.signingDate) {
            this.formItem.signingDate = formatDate(this.formItem.signingDate)
          }
        })
      } else {
        this.formItem = {
          ...formItem
        }
      }
    }
  }
}
</script>
